<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<ui:composition template="/templates/Plantilla.xhtml">
 <ui:define name="content">			
  <h:form>
  	<h:outputText value="NUEVO SUJETO RESIDENCIAL" class="negrita" />
	<p:separator />
					         
  	<p:panel>

		<table>
			<tr>
				<td>
					<h:outputText id="lblTipoCliente" value="SELECCIONE UN TIPO DE CLIENTE: *" class="negrita" />
				</td>
				<td>
					<p:selectOneMenu value="#{sujetoResidencialCreate.tipoCliente.tipoClienteId}"
						effect="fade" required="true" label="Tipo de Cliente">
						<f:selectItems value="#{selectOneMany.tiposDeClientes()}"
							var="tipoCliente" itemLabel="#{tipoCliente.nombre}"
							itemValue="#{tipoCliente.tipoClienteId}"></f:selectItems>
						<p:ajax event="change" listener="#{sujetoResidencialCreate.listenerTipoCliente(sujetoResidencialCreate.tipoCliente)}" />
					</p:selectOneMenu>
				</td>
			</tr>
		</table>
	</p:panel>
	<br/>
	<p:panel>
	<p:wizard flowListener="#{sujetoResidencialCreate.onFlowProcess}">  
      
        <p:tab id="sucursal" title="Sucursal">  
			<h:messages errorClass="error"/>  
            <p:panel header = "DATOS DEL RESPONSABLE">  

				<table style="width: 100%;">
					<tr style="width: 80%;">
						<td>
							<h:outputText id="lblNombre" value="Nombre: *" class="negrita" />
						</td>
						<td>
							<p:inputText id="inputNombre"
									value="#{sujetoResidencialCreate.sucursal.nombre}"
									required="true" label="Nombre" style="width: 80%;" />
						</td>
						<td>
							<h:outputText id="lblApellido" value="Apellido: *" class="negrita" />
						</td>
						<td>
							<p:inputText id="inputApellido"
									value="#{sujetoResidencialCreate.sucursal.apellido}"
									label="Apellido" required="true" style="width: 80%;" />
						</td>
						<td>
							<h:outputText id="lblApodo" value="Apodo/Alias:" class="negrita" />
						</td>
						<td>
							<p:inputText id="inputApodo" style="width: 60%;" 
									value="#{sujetoResidencialCreate.sucursal.alias}"/>
						</td>
					</tr>
				</table>                
                  
				                  
            </p:panel>
            <br/>
            <p:panel header = "DOMICILIO" >
					<table>
						<tr>
							<td>
								<h:outputText id="lblBarrio" value="Barrio: *" class="negrita" />
							</td>
							<td>
								<p:inputText id="inputBarrio" value="#{sujetoResidencialCreate.sucursal.barrio}"
									required="true" label="Barrio" />
							</td>
						</tr>
						<tr>
							<td>
								<h:outputText id="lblCalle" value="Calle: *" class="negrita" />
							</td>
							<td>
								<p:inputText id="inputCalle" label="Calle" required="true"
									value="#{sujetoResidencialCreate.sucursal.calle}"/>
							 </td>
							<td>
								<h:outputText id="lblNumero" value="Nº: *" class="negrita" />
							</td>
							<td>
								<p:inputText id="inputNumero" required="true" label="Numero" 
									value="#{sujetoResidencialCreate.sucursal.numero}"/>
							</td>
						</tr>
						<tr>
							<td>
								<h:outputText id="lblPiso" value="Piso:" class="negrita" />
							</td>
							<td>
								<p:inputText id="inputPiso" value="#{sujetoResidencialCreate.sucursal.piso}" />
							</td>
							<td>
								<h:outputText id="lblDpto" value="Dpto:" class="negrita" />
							</td>
							<td>
								<p:inputText id="inputDpto" value="#{sujetoResidencialCreate.sucursal.departamento}" />
							</td>
							<td>
								<h:outputText id="lblMza" value="Mza:" class="negrita" />
							</td>
							<td>
								<p:inputText id="inputMza" value="#{sujetoResidencialCreate.sucursal.manzana}" />
							</td>
							<td>
								<h:outputText id="lblLte" value="Lote:" class="negrita" />
							</td>
							<td>
								<p:inputText id="inputLte" value="#{sujetoResidencialCreate.sucursal.lote}" />
							</td>
						</tr>
						<tr>
							<td>
								<h:outputText id="lblObservacion" value="Observacion:" class="negrita" />
							</td>
							<td colspan="7">
								<p:inputTextarea rows="3" cols="100"
									counter="counterObservacion" maxlength="250"
									counterTemplate="{0} caracteres restante..."
									value="#{sujetoResidencialCreate.sucursal.observacion}" />
								<h:outputText />
							</td>
						</tr>
						<tr>
							<td></td>
							<td>
								<h:outputText id="counterObservacion" />
							</td>
						</tr>
					</table>
				</p:panel>
			<br/>
			<p:panel header = "DATOS DE CONTACTOS" >
				<table>
					<tr>
						<td>
							<h:outputText id="lblTelefono" value="Telefono:* " class="negrita" />
						</td>
						<td>
							<p:inputText id="inputTelefono" required = "true" label = "Telefono" 
								value="#{sujetoResidencialCreate.sucursal.telefonoFijo}" />
						</td>
						<td>
							<h:outputText id="lblInterno" value="Interno: " class="negrita" />
						</td>
						<td>
								<p:inputText id="inputInterno" value="#{sujetoResidencialCreate.sucursal.interno}" />
						</td>
						<td>
							<h:outputText id="lblCelular" value="Celular: " class="negrita" />
						</td>
						<td>
							<p:inputText id="inputCelular" value="#{sujetoResidencialCreate.sucursal.telefonoMovil}" />
						</td>
					</tr>
					<tr>
						<td>
							<h:outputText id="lblEmail" value="Correo Electronico:" class="negrita" />
						</td>
						<td colspan="5">
							<p:inputText id="inputEmail"
								value="#{sujetoResidencialCreate.sucursal.email}"
								style="width: 80%;" />
						</td>
					</tr>
				</table>
			</p:panel>
			<br/>
			<p:panel header = "REPARTO Y FRECUENCIA DE VISITA">

				<h:panelGrid columns="4">

					<h:outputText value="REPARTO: *" class="negrita" />
					<p:selectOneMenu value="#{sujetoResidencialCreate.reparto.repartoId}" required="true" effect="fade"  label="Reparto">  
			            <f:selectItem itemLabel="Seleccione un Reparto..." itemValue="" />  
			            <f:selectItems value="#{selectOneMany.getRepartos()}" var="reparto" 
							itemLabel="#{reparto.nombre}" 
							itemValue="#{reparto.repartoId}"></f:selectItems>
							<p:ajax event="change" listener="#{sujetoResidencialCreate.listenerReparto(sujetoResidencialCreate.reparto)}" 
								update = "grdVisita"/>  
			        </p:selectOneMenu>
					
					<h:outputText id="lblVisita" value="DIA DE VISITA: *" class="negrita" />
					<p:selectManyCheckbox value="#{sujetoResidencialCreate.diasSeleccionados}" required="true" label="Dia de Visitas">  
			            <f:selectItems value="#{selectOneMany.getDiasSemanales()}" />  
			        </p:selectManyCheckbox>
			                  
				</h:panelGrid>

			</p:panel>
        </p:tab>  

        <p:tab id = "producto" title="Productos">  
            <p:panel header="Asignar Productos">  
                  
                <p:dataTable id="tblProductosDisponibles" value="#{sujetoResidencialCreate.productosDisponibles}"
					var="p" rowKey = "#{p.desProdTipoCliId}" selection = "#{sujetoResidencialCreate.productosSeleccionados}" 
					paginator="true" rows="10">  			
			 			
			 		<f:facet name="header">Productos Disponibles</f:facet>
			 		
					<p:column selectionMode = "multiple"></p:column>
					
					<p:column>
						<f:facet name="header">CODIGO</f:facet>
						#{p.producto.productoId}
					</p:column>
					<p:column>
						<f:facet name="header">NOMBRE</f:facet>
						#{p.producto.nombre}
					</p:column>
					<p:column>
						<f:facet name="header">DESCRIPCION</f:facet>
						#{p.producto.descripcion}
					</p:column>
					<p:column>
						<f:facet name="header">PRECIO</f:facet>
						$ #{p.producto.precio}
					</p:column>
					
				</p:dataTable>
				<p:commandButton value = "Actualizar" title = "Actualizar Lista de Productos" 
					actionlistener="#{sujetoResidencialCreate.listenerTipoCliente(sujetoResidencialCreate.tipoCliente)}"
					update = "tblProductosDisponibles">
				</p:commandButton>  
            </p:panel>  
        </p:tab>
              
        <p:tab id="pack" title="Packs">  
            <p:panel header="Comercialización Packs">  
              
                <h:panelGrid columns="2">
                
					<h:outputText value="Packs: *"/>
					<p:selectOneMenu value="#{sujetoResidencialCreate.comercializacionPack.pack.packId}" label="Packs" width="59%">
			            <f:selectItem itemLabel="Seleccione un Pack..." itemValue="" />  
			            <f:selectItems value="#{sujetoResidencialCreate.packDisponibles}" var="p" 
							itemLabel="#{p.nombre}" 
							itemValue="#{p.packId}">
						</f:selectItems>
						<p:ajax event="change" listener="#{sujetoResidencialCreate.listenerComercializacionPack(sujetoResidencialCreate.comercializacionPack.pack)}" />  
			        </p:selectOneMenu>
			        
					<h:outputText value="Cantidad de Packs: *"/>
					<p:inputText value = "#{sujetoResidencialCreate.comercializacionPack.cantidadPack}" label="Nombre"/>
			
				</h:panelGrid>  
            </p:panel>  
        </p:tab>  
        
        <p:tab id = "terminar" title = "Terminar">
        	<p:panel header = "Datos de la Sucursal">
        		<h:panelGrid columns="2">  			
					<h:outputText value="APELLIDO Y NOMBRE: " class = "negrita"/>					
					<h:outputText value="#{sujetoResidencialCreate.sucursal.apellido},#{sujetoResidencialCreate.sucursal.nombre} "/>
					
					<h:outputText value="DOMICILIO: " class = "negrita"/>
					<h:outputText value="#{sujetoResidencialCreate.sucursal.domicilioCompleto}"/>
				</h:panelGrid>
				<h:panelGrid columns="6">  
		        	<h:outputText value="Telefono: " class = "negrita"/>
		        	<h:outputText value="#{sujetoResidencialCreate.sucursal.telefonoFijo}" />
		    
		        	<h:outputText value="Interno: " class = "negrita"/>
		        	<h:outputText value="#{sujetoResidencialCreate.sucursal.interno}"/>
		 
		        	<h:outputText value="Celular: " class = "negrita"/>
		        	<h:outputText value="#{sujetoResidencialCreate.sucursal.telefonoMovil}"/>
		 
		        	<h:outputText value="Correo Electronico:" class = "negrita"/>
		        	<h:outputText value = "#{sujetoResidencialCreate.sucursal.email}"/>
				</h:panelGrid>		
        	</p:panel>
        	<br/>
        	<p:panel header = "Datos de la Visita">
        		<h:panelGrid columns="2">
        		
					<h:panelGrid id="grdVisita" columns="2" columnClasses="label, value" styleClass="grid">
						<h:outputText value="Reparto: *" class = "negrita"/>
						<h:outputText value="#{sujetoResidencialCreate.reparto.nombre}"/>
						
						<h:outputText value="Dia de visita: *" class = "negrita"/>
						<p:selectManyCheckbox value="#{sujetoResidencialCreate.diasSeleccionados}" disabled="true">
				            <f:selectItems value="#{selectOneMany.getDiasSemanales()}" />  
				        </p:selectManyCheckbox>          
					</h:panelGrid>

				</h:panelGrid>		
        	</p:panel>
        	<p:panel header = "Productos Seleccionados">
        		<p:dataTable var="p" value="#{sujetoResidencialCreate.productoAsignados}"
        			emptyMessage = "No hay productos asignados">  
			        <p:column headerText="Codigo">  
			            <h:outputText value="#{p.productoId}" />
			        </p:column>  
			  
			        <p:column headerText="Nombre">  
			            <h:outputText value="#{p.nombre}" />  
			        </p:column>  
			  
			        <p:column headerText="Precio">  
			            <h:outputText value="$ #{p.precio}" />  
			        </p:column>  
			    </p:dataTable> 
        	</p:panel>
        	
        	<p:panel header = "Pack Asignado">
        		<h:panelGrid columns = "4">
        			<h:outputText value = "NOMBRE PACK: " />
        			<h:outputText value = "#{sujetoResidencialCreate.comercializacionPack.pack.nombre}" />
        			<h:outputText value = "CANTIDAD: " />
        			<h:outputText value = "#{sujetoResidencialCreate.comercializacionPack.cantidadPack}" />		
        		</h:panelGrid>
        	</p:panel>
			<br/>
        	<p:panel>
       			<p:commandButton value = "Guardar" title = "Guardar Sucursal" icon="ui-icon-disk"
       			action = "#{sujetoResidencialCreate.btnGuardarSucursal}">
				</p:commandButton> 		
        	</p:panel>
        </p:tab>  
    </p:wizard>
    </p:panel>
    <br/>
    <p:panel>
    	<p:commandButton value = "Salir" title = "Salir de Alta de Sujeto Empresa">
				</p:commandButton> 		
    </p:panel>  	    
  </h:form>        	        	        	        
 </ui:define>
</ui:composition>
</h:body>
</html>